<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    body{
        background: url("<%=request.getContextPath()%>/images/1.jpg");
        background-repeat: no-repeat;
        background-size: 100%,100%;
    }
    .login-page {
        width: 420px;
        padding: 8% 0 0;
        margin: auto;
    }
    .form {
        position: relative;
        z-index: 1;
        background: #fff;
        max-width: 400px;
        margin: 0 auto 100px;
        padding: 40px 40px 50px;
        text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }
    .form input {
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
    }
    .form button {
        font-family: "Microsoft YaHei", "Roboto", sans-serif;
        text-transform: uppercase;
        outline: 0;
        background: #0dc316;
        width: 100%;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 15px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
    }
    .form button:hover, .form button:active, .form button:focus {
        background: #0eb618;
    }
    .form .message {
        margin: 18px 0 0;
        color: #b3b3b3;
        font-size: 14px;
    }
    .form .message a {
        color: #0eb618;
        text-decoration: none;
    }
    .form .register-form {
        display: none;
    }
    .container {
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 0 auto;
    }
    .container:before, .container:after {
        content: "";
        display: block;
        clear: both;
    }
    .container .info {
        margin: 50px auto;
        text-align: center;
    }
    .container .info h1 {
        margin: 0 0 15px;
        padding: 0;
        font-size: 36px;
        font-weight: 300;
        color: #1a1a1a;
    }
    .container .info span {
        color: #4d4d4d;
        font-size: 12px;
    }
    .container .info span a {
        color: #000000;
        text-decoration: none;
    }
    .container .info span .fa {
        color: #EF3B3A;
    }
    .login-form h2{ font-size:24px; color:#212121; font-weight:600; text-align:left;}
    body {
        background: #20222A; /* fallback for old browsers */
        font-family: "microsoft", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .shake_effect {
        -webkit-animation-name: shake;
        animation-name: shake;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
    }
    @-webkit-keyframes shake {
        from, to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
        }
    }
    @keyframes shake {
        from, to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
        }
    }
    p.center {
        color: #888;
        font-family: "Microsoft YaHei";
    }
    /* CSS Document */


</style>
<body>


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <style>
        body{
            background: url("<%=request.getContextPath()%>/images/1.jpg");
            background-repeat: no-repeat;
            background-size: 100%,100%;
        }
    </style>
</head>
<body>
<%--<p class="center">登录用户</p>--%>
<div id="wrapper" class="login-page">
    <div id="login_form" class="form">

        <form class="login-form" action="/User/login" >
            <h2>用户登录</h2>
            <input type="text" placeholder="用户名"id="user_name" name="username"/>
            <input type="password" placeholder="密码" id="password" name="password"/>
            <input id="login" type="submit" value="登录">
            <p class="message">还没有账户? <a href="/User/toregist">立刻创建</a></p>
        </form>
        <div style="font-size:20px;color: #d43f3a"><span>${msg}</span></div>

        <%--<a href="${pageContext.request.contextPath}/book/allBook">点击进入列表页</a><br>--%>
    </div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</body>
</html>
</body>
</html>
